<template>
  <h3>这是关于页</h3>
  <p>count: {{ count }}</p>
  <button @click="fn(2)">btn2</button>
  <button @click="fn(3)">btn3</button>

  <hr />
  <p>name: {{ name }}</p>
  <button @click="fn2">change name</button>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  computed: {
    count() {
      return this.$store.state.module1.count;
    },
    name() {
      return this.$store.state.module1.name;
    },
  },
  methods: {
    fn(n) {
      // 结果上来看是可以直接修改的，但是是不推荐的
      // this.$store.state.count++;

      // 如果想要修改state的数据，唯一的方式是提交mutation
      // this.$store.commit("addCount", n);
      this.addCount(n);
    },
    fn2() {
      // this.$store.commit("changeName");
      this.changeName();
    },
    // 将仓库里面的addCount函数和changeName函数映射到组件，成为组件methods里面的函数
    // 相当于这个组件里面有了"addCount", "changeName"函数
    // 一样可以写成对象的形式，用于改名
    ...mapMutations(["addCount", "changeName"]),
  },
};
</script>
